<template>
    <view class="pub_page pub_message">
        <pub-head headerName="message" :headerConfig="headerConfig"></pub-head>
        <div class="page_box page_box_scroll" :style="{ 'height': `calc(100vh - ${headerHeight})` }">
            <div class="tabs_div">
                <div class="tab" :class="aType == 1 ? 'tab_active' : ''" @click="aTypeClick(1)">
                    <image class="img" mode="aspectFit"
                        :src="aType == 1 ? 'https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_51.png' : 'https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_50.png'" />
                    <div class="p">公告消息</div>
                </div>
                <div class="tab" :class="aType == 2 ? 'tab_active' : ''" @click="aTypeClick(2)">
                    <image class="img" mode="aspectFit"
                        :src="aType == 2 ? 'https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_51.png' : 'https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_50.png'" />
                    <div class="p">预警消息</div>
                </div>
            </div>
            <z-paging ref="Zpaging" class="lis_div" v-model="list" @query="getList" :refresher-enabled="false"
                :fixed="false" :height="'calc(100% - 208rpx)'">
                <div class="lis">
                    <div class="li" v-for="(li, key) in list" :key="key">
                        <div class="top">
                            <div class="title">{{ aType == 1 ? '公告消息' : '预警消息' }}</div>
                            <div class="time">{{ li.createTime }}</div>
                        </div>
                        <rich-text class="content" :nodes="li.content"></rich-text>
                        <div class="msg">用户快来看看吧。</div>
                    </div>
                </div>
            </z-paging>
        </div>
    </view>
</template>

<script>
export default {
    data() {
        return {
            headerConfig: {
                title: '消息通知',//标题栏内容
                header_color: '#fff'
            },
            headerHeight: getApp().globalData.headerHeight,
            aType: 1,//1公告消息  2预警消息
            list: [],
        };
    },
    onLoad() {
        // 支付宝小程序设置状态栏文字颜色
        this.$comFun.setZfbNavigationBar();

        setTimeout(() => {
            this.$comFun.openLoading();
            this.$refs.Zpaging.reload()
        }, 400);
    },
    methods: {
        aTypeClick(type) {
            this.aType = type;
            setTimeout(() => {
                this.$comFun.openLoading();
                this.$refs.Zpaging.reload()
            }, 400);
        },
        async getList(pageNum, pageSize) {
            let data = {
                pageNum: pageNum,
                pageSize: pageSize,
            };
            let url = ['mobile/user_center/noticeList', 'mobile/user_center/alarmList']
            const res = await this.$request.get(url[this.aType - 1], data);
            this.$comFun.closeLoading();
            // console.log(res);
            if (res.code == 200) {
                res.data.data.map(li => {
                    return {
                        ...li,
                        // time:
                    }
                })
                this.$refs.Zpaging.complete(res.data.data);
            } else {
                this.$refs.Zpaging.complete(false);
            }
        }
    },
};
</script>

<style lang="scss" scoped>
@import "@/common/css/mine.scss";
</style>
